@charset "UTF-8";
//-----------------------------------------------------
// css3 scss
//-----------------------------------------------------

// thanks:
// http://bourbon.io/
// https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss

// Example: @include prroefixer(border-radius, $radius, webkit spec);
//-----------------------------------------------------

$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default; // required for keyframe mixin


// prefixer
//-----------------------------------------------------
@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {

    @if $prefix == webkit and $prefix-for-webkit == true {
      -webkit-#{$property}: $value;
    }
    @else if $prefix == moz and $prefix-for-mozilla == true {
      -moz-#{$property}: $value;
    }
    @else if $prefix == ms and $prefix-for-microsoft == true {
      -ms-#{$property}: $value;
    }
    @else if $prefix == o and $prefix-for-opera == true {
      -o-#{$property}: $value;
    }
    @else if $prefix == spec and $prefix-for-spec == true {
      #{$property}: $value;
    }
    @else {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

// disable prefix
@mixin disable-prefix-for-all() {
  $prefix-for-webkit: false;
  $prefix-for-mozilla: false;
  $prefix-for-microsoft: false;
  $prefix-for-opera: false;
}

// Return vendor-prefixed property names if appropriate
// Example: transitionPropertyNames((transform, color, background), moz) -> -moz-transform, color, background
//-----------------------------------------------------
@function transitionPropertyName($prop, $vendor: false) {
  // put other properties that need to be prefixed here aswell
  @if $vendor and $prop == transform {
    @return unquote('-'+$vendor+'-'+$prop);
  }
  @else {
    @return $prop;
  }
}

@function transitionPropertyNames($props, $vendor: false) {
  $new-props: ();
  @each $prop in $props {
    $new-props: append($new-props, transitionPropertyName($prop, $vendor), comma);
  }
  @return $new-props;
}

// Border Radius
//-----------------------------------------------------
@mixin border-radius($radius:$baseRadius) {
  @include prefixer(border-radius, $radius, webkit spec);
}

// Single Corner Border Radius
@mixin border-top-left-radius($radius:$baseRadius) {
  @include prefixer(border-top-left-radius, $radius, webkit spec);
}

@mixin border-top-right-radius($radius:$baseRadius) {
  @include prefixer(border-top-right-radius, $radius, webkit spec);
}

@mixin border-bottom-right-radius($radius:$baseRadius) {
  @include prefixer(border-bottom-right-radius, $radius, webkit spec);
}

@mixin border-bottom-left-radius($radius:$baseRadius) {
  @include prefixer(border-bottom-left-radius, $radius, webkit spec);
}


// box-sizing
@mixin box-sizing($type:border-box) {
  // border-box | padding-box | content-box
  @include prefixer(box-sizing, $type, webkit moz spec);
}


// box-shadow
@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow, webkit spec);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow, webkit spec);
  }

}


//Transform, transform-origin, transform-style
//-----------------------------------------------------
@mixin transform($property...) {
  @include prefixer(transform, $property, webkit moz o spec);
}

@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right  | length | %
// y-axis - top  | center | bottom | length | %
// z-axis -                          length
  @include prefixer(transform-origin, $axes, webkit moz o spec);
}

@mixin transform-style ($style: preserve-3d) {
  // flat | preserve-3d
  @include prefixer(transform-style, $style, webkit moz o spec);
}

// Transformations
@mixin rotate($degrees...) {
  @include prefixer(transform, rotate($degrees), webkit moz o spec);
}
@mixin rotate3d($degrees...) {
  @include prefixer(transform, rotate3d($degrees), webkit moz o spec);
}
@mixin rotateX($degrees) {
  @include prefixer(transform, rotateX($degrees), webkit moz o spec);
}
@mixin rotateY($degrees) {
  @include prefixer(transform, rotateY($degrees), webkit moz o spec);
}
@mixin rotateZ($degrees) {
  @include prefixer(transform, rotateZ($degrees), webkit moz o spec);
}

@mixin scale($ratio...) {
  @include prefixer(transform, scale($ratio), webkit moz o spec);
}
@mixin scale3d($ratio...) {
  @include prefixer(transform, scale3d($ratio), webkit moz o spec);
}
@mixin scaleX($ratio) {
  @include prefixer(transform, scaleX($ratio), webkit moz o spec);
}
@mixin scaleY($ratio) {
  @include prefixer(transform, scaleY($ratio), webkit moz o spec);
}
@mixin scaleZ($ratio) {
  @include prefixer(transform, scaleZ($ratio), webkit moz o spec);
}

@mixin translate($px...) {
  @include prefixer(transform, translate($px), webkit moz o spec);
}
@mixin translate3d($px...) {
  @include prefixer(transform, translate3d($px), webkit moz o spec);
}
@mixin translateX($px) {
  @include prefixer(transform, translateX($px), webkit moz o spec);
}
@mixin translateY($px) {
  @include prefixer(transform, translateY($px), webkit moz o spec);
}
@mixin translateZ($px) {
  @include prefixer(transform, translateZ($px), webkit moz o spec);
}

@mixin skew($degrees...) {
  @include prefixer(transform, skew($degrees), webkit moz o spec);
  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
@mixin skewX($degrees) {
  @include prefixer(transform, skewX($degrees), webkit moz o spec);
  -webkit-backface-visibility: hidden;
}
@mixin skewY($degrees) {
  @include prefixer(transform, skewY($degrees), webkit moz o spec);
  -webkit-backface-visibility: hidden;
}

// transition
//-----------------------------------------------------
@mixin transition ($properties...) {
  @if length($properties) >= 1 {
    @include prefixer(transition, $properties, webkit moz o spec);
  }

  @else {
    $properties: all 0.15s ease-out 0;
    @include prefixer(transition, $properties, webkit moz o spec);
  }
}

@mixin transition-property ($properties...) {
   -webkit-transition-property: transitionPropertyNames($properties, 'webkit');
      -moz-transition-property: transitionPropertyNames($properties, 'moz');
        -o-transition-property: transitionPropertyNames($properties, 'o');
           transition-property: transitionPropertyNames($properties, false);
}

@mixin transition-duration ($times...) {
  @include prefixer(transition-duration, $times, webkit moz o spec);
}

@mixin transition-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
  @include prefixer(transition-timing-function, $motions, webkit moz o spec);
}

@mixin transition-delay ($times...) {
  @include prefixer(transition-delay, $times, webkit moz o spec);
}


// perspective
//-----------------------------------------------------
@mixin perspective($depth: none) {
  // none | <length>
  @include prefixer(perspective, $depth, webkit moz spec);
}

@mixin perspective-origin($value: 50% 50%) {
  @include prefixer(perspective-origin, $value, webkit moz spec);
}

// Backface visibility
@mixin backface-visibility($visibility:hidden){
  // visible | hidden
  @include prefixer(backface-visibility, $visibility, webkit moz spec);
}


// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
// Official animation shorthand property.
//-----------------------------------------------------
@mixin animation ($animations...) {
  @include prefixer(animation, $animations, webkit moz spec);
}

// Individual Animation Properties
@mixin animation-name ($names...) {
  @include prefixer(animation-name, $names, webkit moz spec);
}

@mixin animation-duration ($times...) {
  @include prefixer(animation-duration, $times, webkit moz spec);
}

@mixin animation-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out
  @include prefixer(animation-timing-function, $motions, webkit moz spec);
}

@mixin animation-iteration-count ($values...) {
// infinite | <number>
  @include prefixer(animation-iteration-count, $values, webkit moz spec);
}

@mixin animation-direction ($directions...) {
// normal | alternate
  @include prefixer(animation-direction, $directions, webkit moz spec);
}

@mixin animation-play-state ($states...) {
// running | paused
  @include prefixer(animation-play-state, $states, webkit moz spec);
}

@mixin animation-delay ($times...) {
  @include prefixer(animation-delay, $times, webkit moz spec);
}

@mixin animation-fill-mode ($modes...) {
// none | forwards | backwards | both
  @include prefixer(animation-fill-mode, $modes, webkit moz spec);
}

// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
@mixin keyframes($name, $prefixes) {
  $original-prefix-for-webkit: $prefix-for-webkit;
  $original-prefix-for-mozilla: $prefix-for-mozilla;
  $original-prefix-for-microsoft: $prefix-for-microsoft;
  $original-prefix-for-opera: $prefix-for-opera;

  @each $prefix in $prefixes {
    @if $prefix == webkit and $original-prefix-for-webkit == true {
      @include disable-prefix-for-all();
      $prefix-for-webkit: true;
      @-webkit-keyframes #{$name} {
        @content;
      }
    }
    @if $prefix == moz and $original-prefix-for-mozilla == true {
      @include disable-prefix-for-all();
      $prefix-for-mozilla: true;
      @-moz-keyframes #{$name} {
        @content;
      }
    }
    @if $prefix == ms and $original-prefix-for-microsoft == true {
      @include disable-prefix-for-all();
      $prefix-for-microsoft: true;
      @-ms-keyframes #{$name} {
        @content;
      }
    }
    @if $prefix == o and $original-prefix-for-opera == true {
      @include disable-prefix-for-all();
      $prefix-for-opera: true;
      @-o-keyframes #{$name} {
        @content;
      }
    }
    @if $prefix == spec {
      @include disable-prefix-for-all();
      @keyframes #{$name} {
        @content;
      }
    }
  }

  $prefix-for-webkit: $original-prefix-for-webkit;
  $prefix-for-mozilla: $original-prefix-for-mozilla;
  $prefix-for-microsoft: $original-prefix-for-microsoft;
  $prefix-for-opera: $original-prefix-for-opera;
}


// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
@mixin background-clip($clip:padding-box) {
  @include prefixer(background-clip, $clip, webkit moz spec);
}


// Gradients
//-----------------------------------------------------
// 水平渐变，从左往右
// @include gradient-horizontal(#333, #ccc);
@mixin gradient-horizontal($gradient...){
  background-image: -moz-linear-gradient(left, $gradient); // FF 3.6+
  background-image: -webkit-linear-gradient(left, $gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $gradient); // Opera 11.10
  background-image: linear-gradient(to right, $gradient); // Standard, IE10
}
// 垂直渐变，从上往下
// @include gradient-vertical(#333 30%, #ccc);
@mixin gradient-vertical($gradient...) {
  background-image: -moz-linear-gradient(top, $gradient); // FF 3.6+
  background-image: -webkit-linear-gradient(top, $gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, $gradient); // Opera 11.10
  background-image: linear-gradient(to bottom, $gradient); // Standard, IE10
}
// 角度渐变
// @include gradient-directional(45deg, #333 30%, #ccc);
@mixin gradient-directional($gradient...) {
  background-image: -moz-linear-gradient($gradient); // FF 3.6+
  background-image: -webkit-linear-gradient($gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient($gradient); // Opera 11.10
  background-image: linear-gradient($gradient); // Standard, IE1
}
// 径向渐变
@mixin gradient-radial($gradient...){
  background-image: -moz-radial-gradient($gradient); // FF 3.6+
  background-image: -webkit-radial-gradient($gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-radial-gradient($gradient); // Opera 11.10
  background-image: radial-gradient($gradient); // Standard, IE1
  background-repeat: no-repeat;
}


// Reset filters for IE
%reset-filter{
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}


//appearance
@mixin appearance($value) {
  @include prefixer(appearance, $value, webkit moz o spec);
}


// User select
// For selecting text on the page
@mixin user-select($arg: none) {
  @include prefixer(user-select, $arg, webkit moz o spec);
}


// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
  @font-face {
    font-family: $font-family;
    font-weight: $weight;
    font-style: $style;

    @if $asset-pipeline == true {
      src: font-url('#{$file-path}.eot');
      src: font-url('#{$file-path}.eot?#iefix')          format('embedded-opentype'),
           font-url('#{$file-path}.woff')                format('woff'),
           font-url('#{$file-path}.ttf')                 format('truetype'),
           font-url('#{$file-path}.svg##{$font-family}') format('svg');
    } @else {
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix')               format('embedded-opentype'),
           url('#{$file-path}.woff')                     format('woff'),
           url('#{$file-path}.ttf')                      format('truetype'),
           url('#{$file-path}.svg##{$font-family}')      format('svg');
    }
  }
}


// Resize anything
@mixin resizable($direction) {
  resize: $direction; // Options: horizontal, vertical, both
  overflow: auto; // Safari fix
}


//columns
//-----------------------------------------------------
@mixin columns($arg: auto) {
// <column-count> || <column-width>
  @include prefixer(columns, $arg, webkit moz spec);
}

@mixin column-count($int: auto) {
// auto || integer
  @include prefixer(column-count, $int, webkit moz spec);
}

@mixin column-gap($length: normal) {
// normal || length
  @include prefixer(column-gap, $length, webkit moz spec);
}

@mixin column-fill($arg: auto) {
// auto || balance
  @include prefixer(columns-fill, $arg, webkit moz spec);
}

@mixin column-rule($arg) {
// <border-width> || <border-style> || <color>
  @include prefixer(column-rule, $arg, webkit moz spec);
}

@mixin column-rule-color($color) {
  @include prefixer(column-rule-color, $color, webkit moz spec);
}

@mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
  @include prefixer(column-rule-style, $style, webkit moz spec);
}

@mixin column-rule-width ($width: none) {
  @include prefixer(column-rule-width, $width, webkit moz spec);
}

@mixin column-span($arg: none) {
// none || all
  @include prefixer(column-span, $arg, webkit moz spec);
}

@mixin column-width($length: auto) {
// auto || length
  @include prefixer(column-width, $length, webkit moz spec);
}


//flex
//-----------------------------------------------------
@mixin display-flex {
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
}

@mixin flex-direction($direction:row){
  //row | row-reverse | column | column-reverse
  //处理兼容性
  @if $direction == column {
    -webkit-box-orient: vertical;
  }
  @include prefixer(flex-direction, $direction, webkit moz spec);
}

@mixin flex-wrap($wrap:no-wrap){
  //nowrap | wrap | wrap-reverse
  @include prefixer(flex-wrap, $wrap, webkit moz spec);
}

//flex-flow is a shorthand for flex-direction and flex-wrap
@mixin flex-flow($flow:column nowrap){
  //direction || wrap
  @include prefixer(flex-flow, $flow, webkit moz spec);
}

@mixin order($num){
  @include prefixer(order, $num, webkit moz spec);
}

@mixin justify-content($align:flex-start){
  //flex-start | flex-end | center | space-between | space-around
  //处理兼容性
  @if $align == center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
  }@else if $align == space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  }


  @include prefixer(justify-content, $align, webkit moz spec);
}

@mixin align-items($align:flex-start){
  //flex-start | flex-end | center | baseline | stretch
  @if $align == center {
    -webkit-box-align: center;
    -ms-flex-align: center;
  }
  @include prefixer(align-items, $align, webkit moz spec);
}

@mixin align-content($align:stretch){
  //stretch | flex-start | flex-end | center | space-between | space-around
  @include prefixer(align-content, $align, webkit moz spec);
}

@mixin align-self($align:stretch){
  //stretch | flex-start | flex-end | center | baseline
  @include prefixer(align-items, $align, webkit moz spec);
}

@mixin flex($flex){
  //initial | auto | none | number
  @include prefixer(flex, $flex, webkit moz spec);
}


//webkit
//-----------------------------------------------------

//text
@mixin text-fill-color($color){
  @include prefixer(text-fill-color, $color, webkit spec);
}
@mixin text-stroke-color($color){
  @include prefixer(text-stroke-color, $color, webkit spec);
}
@mixin text-stroke-width($width){
  @include prefixer(text-stroke-color, $width, webkit spec);
}

//filter
@mixin grayscale($percent:100%){
  @include prefixer(filter, grayscale($percent), webkit spec);
}
@mixin drop-shadow($shadow...){
  @include prefixer(filter, drop-shadow($shadow), webkit spec);
}
@mixin blur($px){
  @include prefixer(filter, blur($px), webkit spec);
}


// @media
//-----------------------------------------------------
